import { Outlet } from 'react-router-dom'
import BottomBar from '@/component/bottomBar/BottomBar'
import './index.less'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import '@/css/animation.less'
const Index = () => {
  const routerConfig = [
    { id: '0', name: '博客', path: '/blog', icon: '' },
    { id: '1', name: '留言', path: '/message', icon: '' },
    { id: '2', name: '聊天', path: '/chat', icon: '' },
    { id: '3', name: '我的', path: '/me', icon: '' }
  ]
  return (
    <div className="index">
      <div className="index-content">
        <TransitionGroup>
          <CSSTransition appear={true} classNames="fadeIn" timeout={500} mode="in-out">
            <Outlet></Outlet>
          </CSSTransition>
        </TransitionGroup>
      </div>
      <div className="index-bottom">
        <BottomBar routerConfig={routerConfig}></BottomBar>
      </div>
    </div>
  )
}

export default Index
